<template>
  <div class="content_page bind_phone">
    <up-input
      placeholder="请输入手机号"
      border="bottom"
      v-model="submitForm.phoneNumber"
      style="width: 630rpx"
    >
      <template #prefix>
        <up-text text="手机号" margin="0 3px 0 0" type="tips"></up-text>
      </template>
      <template #suffix>
        <up-code
          ref="uCodeRef"
          @change="codeChange"
          seconds="60"
          changeText="X秒后请重试"
        ></up-code>
        <up-button @tap="getCode" :text="tipcontent" plain="true"></up-button>
      </template>
    </up-input>
    <up-input
      placeholder="请输入验证码"
      border="bottom"
      v-model="submitForm.code"
      style="width: 630rpx"
    >
      <template #prefix>
        <up-text text="验证码" margin="0 3px 0 0" type="tips"></up-text>
      </template>
    </up-input>
    <div class="submit_btn" @click="toSave">保存</div>
  </div>
</template>
<script lang="ts" setup>
import { onLoad } from "@dcloudio/uni-app";
import { ref, getCurrentInstance } from "vue";
import type { bindPhone, resInfo } from "@/api/myInfo/type.ts";
import { personInfoFn } from "@/api/myInfo/myInfo.ts";
import { sendSms, bindPhoneFn } from "@/api/myInfo/myInfo.ts";
// 发送验证码
const tipcontent = ref("");
const submitForm = ref<bindPhone>({
  phoneNumber: "",
  code: "",
});
const uCodeRef = ref<any>(null);
const codeChange = (text: string) => {
  tipcontent.value = text;
};
// 获取验证码
const getCode = () => {
  if (uCodeRef.value.canGetCode) {
    uni.showLoading({
      title: "正在获取验证码",
      icon: "none",
    });
    sendSms({
      phoneNumber: submitForm.value.phoneNumber,
    })
      .then((res: resInfo) => {
        if (res.resultStatus) {
          uni.showToast({
            title: "验证码已发送",
          });
          uCodeRef.value.start();
        } else {
          uni.showToast({
            title: res.errorMessage,
            icon: "none",
          });
        }
      })
      .catch((err: any) => {
        uni.showToast({
          title: "服务器异常",
          icon: "none",
        });
      })
      .finally(() => {
        setTimeout(() => {
          uni.hideLoading();
        }, 1000);
      });
  } else {
    uni.showToast({
      title: "倒计时结束之后再发送",
    });
  }
};
const getData = () => {
  personInfoFn()
    .then((res: resInfo) => {
      if (res.resultStatus) {
        if (res.resultData) {
          if (fromPage.value == "pages/addDevice/addDevice") {
            uni.navigateBack();
          } else {
            uni.navigateTo({
              url: "/pages/settingInfo/index",
            });
          }
        }
      } else {
        uni.showToast({
          title: res.errorMessage,
          icon: "none",
        });
      }
    })
    .catch((err: any) => {
      uni.showToast({
        title: "服务器异常",
        icon: "none",
      });
    });
};
const instance = getCurrentInstance();
const appStorage = instance?.appContext.config.globalProperties.appStorage;
const toSave = () => {
  bindPhoneFn({
    phoneNumber: submitForm.value.phoneNumber,
    code: submitForm.value.code,
  })
    .then((res: resInfo) => {
      if (res.resultStatus) {
        uni.showToast({
          title: "绑定成功",
        });
        getData();
      } else {
        uni.showToast({
          title: res.errorMessage,
          icon: "none",
        });
      }
    })
    .catch((err: any) => {
      uni.showToast({
        title: "服务器异常",
        icon: "none",
      });
    });
};
const fromPage = ref("");
onLoad((options) => {
  const pages = getCurrentPages();
  const prevPage = pages[pages.length - 2];
  fromPage.value = prevPage.route;
  console.log(fromPage.value, fromPage.value);
});
</script>
<style lang="scss" scoped>
.content_page {
  background-color: #fff;
  padding: 32rpx;

  .submit_btn {
    height: 88rpx;
    background: linear-gradient(90deg, #00a67e, #006d56);
    font-size: 36rpx;
    line-height: 88rpx;
    color: #fff;
    text-align: center;
    border-radius: 16rpx;
    margin: 70rpx auto;
  }
}
</style>
